<template>
  <div>
    <div class="container">
      <!--在输入栏的正上方，加上文件列表-->
      <div class="file-list">
        <div
          v-for="(fileName, index) in fileNames"
          :key="index"
          class="file-name"
        >
          <FileExcelOutlined
            :style="{ fontSize: '16px', color: '#FFFFF', marginRight: '3px' }"
          />
          <span style="margin-left: 5px">{{ fileName }}</span>
        </div>
      </div>
      <div class="input-container">
        <button
          class="upload_file"
          @click="uploadFile"
          style="border: none; background-color: transparent; box-shadow: none"
        >
          <CloudUploadOutlined
            :style="{
              height: '1em',
              width: '1em',
              fontSize: '28px',
              color: '#7F7F7F',
            }"
          />
        </button>

        <div class="flex-container">
          <div class="input-wrapper">
            <textarea
              v-model="newMessage"
              @input="adjustTextareaHeight"
              @compositionstart="isComposing = true"
              @compositionend="isComposing = false"
              @keydown.enter.prevent="sendMessage"
              placeholder="与梧桐ChatBI开始对话吧"
              class="input-textarea"
              rows="1"
            ></textarea>
          </div>

          <a-button
            style="
              background-color: transparent;
              border: none;
              margin-bottom: 4px;
              box-shadow: none;
            "
            @click="sendMessage"
          >
            <ArrowUpOutlined
              v-if="!loading"
              :style="{
                height: '1em',
                width: '1em',
                fontSize: '21px',
                color: '#7F7F7F',
              }"
            />

            <LoadingOutlined
              v-if="loading"
              :style="{
                height: '1em',
                width: '1em',
                fontSize: '21px',
                color: 'blue',
              }"
            />
          </a-button>
        </div>
      </div>
    </div>
    <div class="info-text">
      ChatBI也可能会犯错，请仔细核对关键信息，请勿盲目相信大模型。
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useStore } from "vuex";
import {
  FolderOpenOutlined,
  CloudUploadOutlined,
  FileExcelTwoTone,
  SendOutlined,
  FileExcelOutlined,
  LoadingOutlined,
  ArrowUpOutlined,
} from "@ant-design/icons-vue";

// vue3 定义 父子通信 emit
const emit = defineEmits(["message-sent", "file-upload"]);

// vuex 全局状态
const store = useStore();

// 等价与 vue2 中的 mapState
const fileNames = computed(() => store.state.fileNames);

const newMessage = ref("");

const isComposing = ref(false); // 组合输入状态追踪

const props = defineProps({
  loading: Boolean,
});

// 优化，当loading为false时才可以发送
function sendMessage() {
  if (!props.loading && !isComposing.value && newMessage.value.trim() !== "") {
    emit("message-sent", newMessage.value.trim());
    newMessage.value = "";
  }
}

function uploadFile() {
  if (!props.loading) {
    emit("file-upload");
  }
}

function adjustTextareaHeight() {
  const textarea = document.querySelector(".input-textarea");
  textarea.style.height = "auto"; // 重置高度以计算新的内容高度
  const scrollHeight = textarea.scrollHeight;
  const maxHeight = parseFloat(getComputedStyle(textarea).lineHeight) * 3;
  textarea.style.height = `${Math.min(scrollHeight, maxHeight)}px`; // 设置textarea的高度，确保不超过最大高度
  textarea.style.overflowY = scrollHeight > maxHeight ? "auto" : "hidden"; // 根据内容高度动态设置滚动条
}

onMounted(() => {
  adjustTextareaHeight();
});
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
  width: 100%;
  height: 12.5vh;
}

.file-list {
  display: flex; /* 设置 Flexbox 布局 */
  position: fixed;
  justify-content: left;
  flex-wrap: wrap; /* 允许元素在必要时换行 */
  padding: 0.375rem; /* 容器的内边距 */
  bottom: 90px; /* 文件列表与输入容器之间的间距 */
  width: 60%; /* 确保文件列表宽度与输入容器一致 */
}

.input-container {
  display: flex;
  justify-content: center;
  padding: 0.375rem;
  background-color: #eaeaea;
  border-radius: 26px;
  transition: background-color 0.3s;
  position: fixed;
  bottom: 40px;
  left: 57%;
  transform: translateX(-50%);
  width: 60%;
  box-sizing: border-box;
  height: auto; /* 允许高度自适应 */
}

.file-name {
  /*background-color: #effde9;*/
  background: linear-gradient(150deg, #1e5aca, #2162dc, #2d8bdd 70%, #2c70d0);
  color: white;
  border-radius: 10px;
  padding: 4px 20px 2px 10px; /* 增加水平内边距 */
  margin-right: 9px; /* 元素之间的水平间距 */
  margin-bottom: 2px; /* 元素之间的垂直间距 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  font-size: 14px; /* 设置字体大小 */
  display: inline-block; /* 使元素为块状 */
  transition: transform 0.5s; /* 添加鼠标悬停时的过渡效果 */
}

.file-name:hover {
  transform: scale(1.1); /* 鼠标悬停时放大 */
  background: #1e5aca; /* 鼠标悬停时背景颜色变为蓝色 */
}

.upload_file {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px; /* 设置按钮的宽度 */
  height: 40px; /* 设置按钮的高度 */
  background-color: transparent;
  border: none;
  cursor: pointer; /* 确保有鼠标点击的指针样式 */
}

.flex-container {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
  width: 100%;
}

.info-text {
  position: fixed;
  bottom: 10px; /* 置于页面底部 */
  left: 55%;
  transform: translateX(-50%);
  width: 100%; /* 宽度100% */
  text-align: center; /* 文本居中 */
  font-size: 12px; /* 设置小字体大小 */
  color: #666; /* 字体颜色 */
}

.input-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  height: 100%; /* 确保wrapper高度自适应 */
}

.input-textarea {
  resize: none;
  border: none;
  background: transparent;
  padding-left: 19px;
  padding-bottom: 0px;
  font-size: 17px;
  outline: none;
  width: 100%;
  overflow-y: hidden; /* 添加垂直滚动条 */
  color: #333;
  line-height: 1.5; /* 设置行高 */
  height: auto; /* 允许textarea高度自适应 */
  max-height: calc(1.5em * 3); /* 设置最大高度为三行的高度 */
  margin-top: 0.6%;
}
</style>
